<template>
      <!-- 考试 -->
    <div class="exam" v-if="examDetail">
        <!--过滤栏-->
        <div class="filter-container">
            <div class="filter-item item-input">
                <el-input v-model="examInput" placeholder="请输入考试名称"></el-input>
            </div>
            <div class="filter-item item-button">
                <el-button type="primary" @click="searchExam"><i class="el-icon-search"></i> 搜索</el-button>
            </div>
            <div class="filter-item item-button">
                <el-button type="primary" @click="requestExam(),examInput = ''"><i class="el-icon-refresh"></i> 刷新
                </el-button>
            </div>
            <div class="filter-item item-button">
                <el-button type="primary" @click="createExam"><i class="el-icon-s-flag"></i>组建考试班级</el-button>
            </div>
        </div>
        <!---->

      <!-- Form -->

      <el-dialog v-model="createExamVisible" title="组建考试班级">
        <el-form :model="examForm">
          <el-form-item label="考试名称" :label-width="formLabelWidth">
            <el-input v-model="examForm.examName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="考试所属班级标识" :label-width="formLabelWidth">
            <el-select v-model="examForm.classId" placeholder="请选择班级"  >
              <el-option
                  v-for="obj in trainClass"
                  :key="obj.id"
                  :label="obj.name"
                  :value="obj.id" >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司所属标识" :label-width="formLabelWidth">
            <el-input v-model="examForm.companyId" autocomplete="off" />
          </el-form-item>
          <el-form-item label="试卷标识" :label-width="formLabelWidth">
            <el-input v-model="examForm.paperId" autocomplete="off" />
          </el-form-item>
          <el-form-item label="开始时间" :label-width="formLabelWidth">
            <el-date-picker
                v-model="examForm.startTime"
                type="datetime"
                placeholder="选择开始考试日期时间"
            />
          </el-form-item>
          <el-form-item label="结束时间" :label-width="formLabelWidth">
            <el-date-picker
                v-model="examForm.endTime"
                type="datetime"
                placeholder="选择结束考试日期时间"
            />
          </el-form-item>
          <el-form-item label="创建人标识" :label-width="formLabelWidth">
            <el-input v-model="examForm.creatorId" autocomplete="off" />
          </el-form-item>
          <el-form-item label="考试持续时间" :label-width="formLabelWidth">
            <el-input v-model="examForm.durationTime" autocomplete="off" />
          </el-form-item>
          <el-form-item label="选择语言类型" :label-width="formLabelWidth">
            <el-input v-model="examForm.languageType" autocomplete="off" />
          </el-form-item>
          <el-form-item label="创建时间" :label-width="formLabelWidth">
            <el-input v-model="examForm.createTime" autocomplete="off" />
          </el-form-item>
          <!--<el-form-item label="是否禁用" :label-width="formLabelWidth">-->
          <!--  <el-input v-model="examForm.disabled" autocomplete="off" />-->
          <!--</el-form-item>-->
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancleCreateExam">取消</el-button>
        <el-button type="primary" @click="verifyCreateExam">
          确认
        </el-button>
      </span>
        </template>
      </el-dialog>




        <!--考试列表-->
        <div class="exam-list">
            <el-table
                    :data="examDetail"
                    border
                    style="width: 100%;">
                <el-table-column
                        label="序号"
                        width="60"
                        align="center">
                    <template #default="scope">
                        {{scope.$index + 1}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="考试名称"
                        width="200"
                        align="center">
                    <template #default="scope">
                        <el-tooltip content="查看考试详情" placement="top">
                            <span class="col2-cell-style"
                                  @click="viewExamDetail((currentPage - 1) * pageSize + scope.$index)">{{scope.row.name}}</span>
                        </el-tooltip>

                    </template>
                </el-table-column>
                <el-table-column
                        prop="class"
                        label="考试班级"
                        width="180"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="duration"
                        label="考试时长"
                        width="80"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="startTime"
                        label="开考时间"
                        width="160"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="endTime"
                        label="结束时间"
                        width="160"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="createdTime"
                        label="创建时间"
                        width="160"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="creator"
                        label="创建人"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="80"
                        align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 0" type="success" disable-transitions>未开始</el-tag>
                        <el-tooltip content="该场考试正在考试中" placement="top">
                            <el-tag v-if="scope.row.status == 1" type="info" disable-transitions>考试中</el-tag>
                        </el-tooltip>
                        <el-tag v-if="scope.row.status == 2" type="warning" disable-transitions>已结束</el-tag>
                        <el-tag v-if="scope.row.status == 3" type="danger" disable-transitions>阅卷中</el-tag>
                        <el-tooltip content="该场考试已完成阅卷" placement="top">
                            <el-tag v-if="scope.row.status == 4" disable-transitions>已阅卷</el-tag>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button
                                size="small"
                                type="primary"
                                v-if="(scope.row.status == 0) || (scope.row.status == 1)"
                                @click="locateCurExam((currentPage - 1) * pageSize + scope.$index)">添加考生
                        </el-button>
                        <el-button
                                size="small"
                                type="success"
                                v-if="scope.row.status == 0"
                                @click="startExam((currentPage - 1) * pageSize + scope.$index)">开始
                        </el-button>
                        <el-button
                                size="small"
                                type="danger"
                                v-if="scope.row.status == 1"
                                @click="endExam((currentPage - 1) * pageSize + scope.$index)">结束
                        </el-button>
                        <el-tooltip content="手动评阅全部有提交记录的考生答卷" placement="top">
                            <el-button
                                    size="small"
                                    type="primary"
                                    v-if="(scope.row.status == 2) || (scope.row.status == 3)"
                                    @click="reviewPapers(scope)">手动阅卷
                            </el-button>
                        </el-tooltip>

                        <el-button
                                size="small"
                                type="danger"
                                v-if="scope.row.status != 1"
                                @click="curExamIndex = (currentPage - 1) * pageSize + scope.$index, toDelExam = true">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>



    </div>
</template>

<script>
import API from "../api/trainer/exam"
import MOCKAPI from "../api/mock/trainer"
import {ref,reactive} from 'vue'

import {ElMessage} from "element-plus";

export default {
    setup(){
        let examInput =ref('')
        let createExamVisible=ref(false)
        let examDetail=reactive([
                {
                    "total":0,
                    "examineeCount":0,
                    "name":"软件设计师考试",
                    "examId":513,"class":"软件设计师培训1班",
                    "classId":288,
                    "duration":120,
                    "startTime":"2023-09-06 16:30:00",
                    "endTime":"2023-09-06 18:35:00",
                    "createdTime":"2023-09-01 09:55:54",
                    "creator":"刘新",
                    "paperId":149,
                    "paperTitle":"21上数据结构重考试卷B",
                    "status":1,
                    "language":1,
                    "evaluation":1,
                    "examineeData":[]
                },
                {
                    "total":0,
                    "examineeCount":0,
                    "name":"软件设计师考试2",
                    "examId":513,"class":"软件设计师培训1班",
                    "classId":288,
                    "duration":120,
                    "startTime":"2023-09-06 16:30:00",
                    "endTime":"2023-09-06 18:35:00",
                    "createdTime":"2023-09-01 09:55:54",
                    "creator":"刘新",
                    "paperId":149,
                    "paperTitle":"21上数据结构重考试卷B",
                    "status":1,
                    "language":1,
                    "evaluation":1,
                    "examineeData":[]
                },
                {
                    "total":0,
                    "examineeCount":0,
                    "name":"软件设计师考试3",
                    "examId":513,"class":"软件设计师培训1班",
                    "classId":288,
                    "duration":120,
                    "startTime":"2023-09-06 16:30:00",
                    "endTime":"2023-09-06 18:35:00",
                    "createdTime":"2023-09-01 09:55:54",
                    "creator":"刘新",
                    "paperId":149,
                    "paperTitle":"21上数据结构重考试卷B",
                    "status":1,
                    "language":1,
                    "evaluation":1,
                    "examineeData":[]
                },
                {
                    "total":0,
                    "examineeCount":0,
                    "name":"软件设计师考试4",
                    "examId":513,"class":"软件设计师培训2班",
                    "classId":288,
                    "duration":120,
                    "startTime":"2023-09-06 16:30:00",
                    "endTime":"2023-09-06 18:35:00",
                    "createdTime":"2023-09-01 09:55:54",
                    "creator":"培训师2",
                    "paperId":149,
                    "paperTitle":"21上数据结构重考试卷B",
                    "status":1,
                    "language":1,
                    "evaluation":1,
                    "examineeData":[]
                },
                 {
                    "total":0,
                    "examineeCount":0,
                    "name":"java架构师考试",
                    "examId":513,"class":"java架构师培训1班",
                    "classId":288,
                    "duration":120,
                    "startTime":"2023-09-06 16:30:00",
                    "endTime":"2023-09-06 18:35:00",
                    "createdTime":"2023-09-01 09:55:54",
                    "creator":"培训师2",
                    "paperId":149,
                    "paperTitle":"21上数据结构重考试卷B",
                    "status":2,
                    "language":1,
                    "evaluation":1,
                    "examineeData":[]
                },

        ])
        let trainClass =ref([{
          "id": null,
          "name": "测试",
          "createTime": null,
          "creatorId": null,
          "notes": null,
          "status": null,
          "inviteCode": null,
          "updateTime": null,
          "updatorId": null,
          "belongTeacherId":null,
          "organizationId": null
        }])
        let examForm=reactive({
          examName:"",
          classId:null,
          companyId:null,
          paperId:null,
          startTime:"",
          endTime:"",
          creatorId:null,
          durationTime:null,
          examType:"",
          examStatus:"",
          languageType:"",
          createTime:"",
          disabled:false,
        })
        const createExam=()=>{
          createExamVisible.value=true;
          MOCKAPI.getAllTrainClass().then(res=>{
            console.log(res.data)
            if(res.data.code==0){
              trainClass.value=res.data.content.list
              // Object.assign(trainClass,res.data.content.list)
              console.log(trainClass)
            }
          })
        }

        const  cancleCreateExam=()=>{
            createExamVisible.value=false
        }
      //TODO 创建考试没写
        const verifyCreateExam = () => {
          createExamVisible.value=false
          ElMessage({
            showClose: true,
            message: '创建考试班级前端未写',
            type:"error"
          })



        }
        return{
          createExamVisible,
            examDetail,
            examInput,
            createExam,
            examForm,
            trainClass,
            cancleCreateExam,
            verifyCreateExam
        }
    }
}
</script>

<style scoped>
  .exam {
        width: 100%;
    }

    .filter-container {
        padding-bottom: 10px;
    }

    .filter-item {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 10px;
    }

    .item-input {
        width: 200px;
        margin-right: 5px;
    }

    .filter-container .filter-item:nth-child(3), .filter-container .filter-item:nth-child(4) {
        margin-left: 16px;
    }

    .exam-list {
        width: 100%;
    }

    .pagination-container {
        margin-top: 30px;
    }

    .exam-list .col2-cell-style {
        color: #409EFF;
        cursor: pointer;
    }

    .filter-bar {
        width: 100%;
        padding-bottom: 10px;
    }

    .filter-bar .el-input {
        width: 200px;
        margin-right: 5px;
    }

    .filter-bar .item-margin-left-16 {
        margin-left: 16px;
    }

    .el-dialog .el-table .col2-cell-style {
        color: #409EFF;
        cursor: pointer;
    }

    .el-dialog .stu-paper-container {
        margin: 0 20px;
    }

    .el-dialog .stu-paper-container h1 {
        text-align: center;
        font-size: 2.5em;
    }

    .el-dialog .stu-paper-container h3 {
        text-align: left;
    }

    .el-dialog .stu-paper-container .el-row {
        margin-bottom: 30px;
    }

    .el-dialog .stu-paper-container .stu-answer {
        margin-left: 20px;
    }

    .el-dialog .stu-paper-container .stu-paper-footer {
        text-align: right;
        margin-top: 30px;
    }

    .el-dialog .paper-container {
        margin: 0 20px;
    }

    .el-dialog .paper-container .paper-header h1 {
        text-align: center;
        font-size: 2.5em;
    }

    .el-dialog .paper-container .paper-info {
        text-align: center;
        padding: 20px;
    }

    .el-dialog .paper-container .paper-info h3 {
        display: inline-block;
        width: 25%;
    }

    .paper-container .paper-content {
        padding: 20px;
    }

    .filter-bar .el-progress {
        margin-left: 20px;
    }

</style>
